<script setup>
  import {useAttrs,ref, reactive, computed,defineProps, defineComponent, defineEmits, defineExpose, onMounted} from 'vue'

  const props = defineProps({
  type: {
    type: String,
    default: ''
  },
  content: {
    type: String,
    default: ''
  },
  showIcon: {
    type: Boolean,
    default: true
  },
  iconType: {
    type: String,
    default: 'iconquestion'
  }
})

const actionIconStyles = computed(() => ({
  color:
    props.type === 'error'
      ? 'var(--error)'
      : props.type === 'warning'
      ? 'var(--warning)'
      : 'var(--color-level-2)'
}))
</script>

<template>
  <div>
    <div class="flexclass">
      <span
        v-show="showIcon"
        class="iconfont cxz"
        :class="iconType"
        :style="actionIconStyles"
      ></span>

      <div class="czxcxz" v-html="content" />
    </div>
  </div>
</template>

<style  scoped>
  .flexclass{
    display: flex;
    justify-content: start;
    justify-items: start;
  }
  .cxz{
    display: block;
    font-size: 25px;
    height: 25px;
    line-height: 25px;
  }
  .czxcxz{
    margin-left: 10px;
    word-break: break-all;
    width: 85%;
    color: red;
  }
</style>
